<template>
    <h2>按钮</h2>
    <div class="wrap">
        <div class="mb-4">
            <el-button disabled>Default</el-button>
            <el-button type="primary" disabled>Primary</el-button>
            <el-button type="success" disabled>Success</el-button>
            <el-button type="info" text>Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
            <el-button type="danger">
                <el-icon class="el-icon--right">
                    <Upload />
                </el-icon>
                Danger
            </el-button>
        </div>

        <div class="mb-4">
            <el-button plain>Plain</el-button>
            <el-button type="primary" plain>Primary</el-button>
            <el-button type="success" plain>Success</el-button>
            <el-button type="info" plain>Info</el-button>
            <el-button type="warning" plain>Warning</el-button>
            <el-button type="danger" plain>Danger</el-button>
        </div>

        <div class="mb-4">
            <el-button round>Round</el-button>
            <el-button type="primary" round>Primary</el-button>
            <el-button type="success" round>Success</el-button>
            <el-button type="info" round>Info</el-button>
            <el-button type="warning" round>Warning</el-button>
            <el-button type="danger" round>Danger</el-button>
        </div>

        <div>
            <el-button icon="Star" circle />
            <el-button type="primary" icon="Edit" circle />
            <el-button type="success" icon="Check" circle />
            <el-button type="info" icon="Message" circle />
            <el-button type="warning" icon="Star" circle />
            <el-button type="danger" icon="Delete" circle />
        </div>
    </div>
    <h2>按钮组</h2>
    <div class="wrap">
        <el-button-group class="ml-4">
            <el-button type="primary" icon="Edit" />
            <el-button type="primary" icon="Share" />
            <el-button type="primary" icon="Delete" />
        </el-button-group>

        <el-button type="primary" loading>Loading</el-button>
        <el-button type="primary" :loading-icon="Eleme" loading>Loading</el-button>

    </div>

    <h2>图标</h2>
    <div class="wrap">
        <el-icon :size="20">
            <Edit />
        </el-icon>
        <el-icon>
            <WalletFilled />
        </el-icon>
    </div>

    <h3>布局</h3>
    <div class="wrap demo-1">
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="grid-content bg-a">01</div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-a">02</div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-a">03</div>
            </el-col>
            <el-col :span="8" :offset="8">
                <div class="grid-content bg-a">04</div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-a">05</div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-a">06</div>
            </el-col>
        </el-row>
    </div>

    <div class='wrap'>
        <el-row :gutter="10">
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <div class="grid-content bg-a" />
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                <div class="grid-content bg-a" />
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                <div class="grid-content bg-a" />
            </el-col>
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <div class="grid-content bg-a" />
            </el-col>
        </el-row>
    </div>

    <h2>复选框</h2>
    <div class="wrap">
        <el-checkbox v-model="checked1" :indeterminate="isIndeterminate" label="Option 1"  border/>
        <el-checkbox v-model="checked2" disabled>Option 2</el-checkbox>
    </div>

    <h2>复选框组</h2>
    <div class="wrap">
        <el-checkbox-group v-model="checkList" :min="1" :max="2">
            <el-checkbox label="Option A" value="Value A" />
            <el-checkbox label="Option B" value="Value B" />
            <el-checkbox label="Option C" value="Value C" />
            <el-checkbox label="disabled" value="Value disabled" disabled />
            <el-checkbox label="selected and disabled" value="Value selected and disabled" disabled />
        </el-checkbox-group>
        <p>
            checkList:{{ checkList }}
        </p>
    </div>

    <h2>复选框按钮组</h2>
    <div class="wrap">
        <el-checkbox-group v-model="checkList" :min="1" :max="2">
            <el-checkbox-button label="Option A" value="Value A" ></el-checkbox-button>
            <el-checkbox-button label="Option B" value="Value B" ></el-checkbox-button>
            <el-checkbox-button label="Option C" value="Value C" ></el-checkbox-button>
            <el-checkbox-button label="disabled" value="Value disabled" disabled > </el-checkbox-button>
            <el-checkbox-button label="selected and disabled" value="Value selected and disabled" disabled ></el-checkbox-button>
        </el-checkbox-group>
        <p>
            checkList:{{ checkList }}
        </p>
    </div>

    <el-divider />

    <h2>输入框</h2>
    <div >
        <!-- <el-input v-model="msg"  placeholder="Please input" disabled /> -->
        <el-input class="search" v-model="msg"  placeholder="Please input" clearable />
        <p>msg:{{ msg}}</p>
    </div>

    <h2>密码框</h2>
    <div >
        <el-input type="password" class="search" v-model="msg"  placeholder="Please input" show-password />
        <p>msg:{{ msg}}</p>
    </div>


    <h2>带图标的输入框</h2>
    <div class="wrap">
        <el-input class="search" v-model="msg"  placeholder="Please input" clearable prefix-icon="Calendar"></el-input>
        <el-input class="search" v-model="msg"  placeholder="Please input" clearable suffix-icon="Calendar"></el-input>
    </div>

    <div class="wrap">
        <el-input class="search" v-model="msg"  placeholder="Please input" clearable >
            <template #prefix>
                <el-icon>
                    <Calendar></Calendar>
                </el-icon>
            </template>
        </el-input>
        <el-input class="search" v-model="msg"  placeholder="Please input" clearable >
            <template #suffix>
                <el-icon>
                    <Calendar></Calendar>
                </el-icon>
            </template>
        </el-input>
    </div>
    <h2>复合型输入框</h2>
    <div class="wrap">
        <el-input class="search" v-model="msg"  placeholder="Please input" clearable prefix-icon="Calendar">
            <template #prepend>
                用户名:
            </template>
        </el-input>
        <el-input class="search" v-model="msg"  placeholder="Please input" clearable suffix-icon="Calendar"></el-input>
    </div>


    
</template>

<script>
/* 
    学习组件需要注意
    1. 向组件传入的 属性(prop)  方法(函数)  事件(原生事件  自定义事件)
    2. 插槽  (默认插槽  具名插槽  作用域插槽)
    3. 组件自身的方法 (组件时一个vue实例  => 该Vue实例存储的数据和方法)
    4. 嵌套组件  => 先当前组件  再看嵌套子组件

*/
export default {
    data() {
        return {
            checked1: false,
            checked2: false,
            checkList:[],
            isIndeterminate:true,
            msg:""
        }
    }
}
</script>

<style scoped>
.wrap {
    padding: 5px;
    border: 1px dashed #333;
    margin: 5px;
}

.demo-1 {
    line-height: 45px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    width: 100%;
    height: 100%;
}

.bg-a {
    background-color: grey;
}

.search{
    width: 200px;
}
</style>